<template>
    <div class="yonghuQX">
        <div class="admin">
            <div class="admin-left">
                <div class="admin-left-case">
                    <div class="admin-left-case-top">
                        <div class="admin-left-case-top-search">
                            <el-select @change="selectChange" style="flex: 0 0 72px;" v-model="form.rylb" placeholder="全部">
                                <el-option v-for="(item,i) in rylbArr" :label="item.label" :value="item.value" :key="i"></el-option>
                            </el-select>
                            <div class="admin-left-case-top-search-right">
                                <el-input :prefix-icon="Search" v-model="form.ryxm" placeholder="搜索人员代码/名称"></el-input>
                            </div>
                        </div>
                    </div>
                    <div>
                        <!-- 表格 -->
                        <xinpuTableGrid
                        ref="xinpuGrid"
                        :loading="loading"
                        :tableHeight="tableHeight"
                        :tableWidth="tableWidth"
                        :columnsData="columns"
                        :data="data"
                        :border="false"
                        >
                        </xinpuTableGrid>
                    </div>
                </div>
            </div>
            <div class="admin-right">
                <div class="admin-right-top">
                    <span>操作员代码：<span style="color:#333333;margin-right:24px">0001</span></span><span>操作员名称：<span style="color:#333333">任国</span></span>
                </div>
                <div class="admin-right-bottom">
                    <div class="admin-right-bottom-left">
                        <div class="admin-right-bottom-left-title">模块名称</div>
                        <div class="admin-right-bottom-left-content">
                            <div class="admin-right-bottom-case">
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            </div>
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <div class="admin-right-bottom-case" v-for="(item,i) in cityOptions" :key="i">
                                    <el-checkbox :label="item" :value="item">{{item}}</el-checkbox>
                                </div>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="admin-right-bottom-right">
                        <div class="admin-right-bottom-left-title">菜单名称</div>
                        <div class="admin-right-bottom-left-content">
                            <div class="admin-right-bottom-case">
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            </div>
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <div class="admin-right-bottom-case" v-for="(item,i) in cityOptions" :key="i">
                                    <el-checkbox :label="item" :value="item">{{item}}</el-checkbox>
                                </div>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref, onMounted } from "vue";
import {Search} from '@element-plus/icons-vue'
const form = ref({
    rylb:'',
    ryxm:''
})
const rylbArr = ref([])
const loading = ref(false);
const xinpuGrid = ref(null);
const tableHeight = ref(document.body.clientHeight - 180);
const tableWidth = ref(0);
const columns = ref([
  { field: "rybm", title: "人员代码"},
  { field: "ryxm", title: "人员姓名"},
]);
const data = ref([])
const cityOptions = ref([]);
const isIndeterminate = ref(true)
const checkAll = ref(false)
const checkedCities = ref([])
const handleCheckAllChange = (val)=>{
    checkedCities.value = val ? cityOptions.value : [];
    isIndeterminate.value = false;
}
const handleCheckedCitiesChange = (value)=>{
    let checkedCount = value.length;
    checkAll.value = checkedCount === cityOptions.value.length;
    isIndeterminate.value = checkedCount > 0 && checkedCount < cityOptions.value.length;
}
// 获取人员类别数据
const getrylbData = async()=>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":"xp_ry_006"});
  if(res && res.Flag){
    res.ReContent.unshift({
        label:'全部',
        value:''
    })
    rylbArr.value = res.ReContent
  }
}
const getrybm = async()=>{
  loading.value = true
  const res = await window.xinpuHttpApi('100080',form.value)
  console.log(res);
  if(res && res.Flag){
    let result = []
    res.ReContent.forEach(item => {
        if(item.syzt == 1){
            result.push(item)
        }
    });
    data.value = result
  }
  loading.value = false
}
const gethosmenu = async () => {
  const res = await window.xinpuWebsApi("GetHosMenu", null);
  console.log(res);
  if (res && res.Flag) {
    cityOptions.value = res.ReContent;
  } else {
    window.xinpuMessageOpen("error", res.CodeMsg);
  }
};
const selectChange = ()=>{
    getrybm()
}
onMounted(()=>{
    getrybm()
    getrylbData()
    getrylbData()
})
</script>

<style lang="scss" scoped>
.yonghuQX{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;
  .admin{
    width: 100%;
    height: calc(100vh - 100px);
    background: #fff;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    align-items: center;
    .admin-left{
      flex: 0 0 318px;
      padding: 12px;
      box-sizing: border-box;
      .admin-left-case{
        width: 100%;
        height: calc(100vh - 124px);
        overflow: hidden;
        border-radius: 4px;
        // border: 1px solid #EBEBEB;
        .admin-left-case-top{
          width: 100%;
          height: 56px;
          padding: 12px;
          box-sizing: border-box;
          border: 1px solid #EBEBEB;
          border-bottom: none;
          border-radius: 4px 4px 0 0 ;
          .admin-left-case-top-search{
            display: flex;
            align-items: center;
            border-radius: 4px;
            border: 1px solid #EBEBEB;
            .admin-left-case-top-search-right{
                flex: 1;
                border-left: 1px solid #EBEBEB;
            }
          }
        }
      }
    }
    .admin-right{
        flex: 1;
        border-left: 1px solid #EBEBEB;
        margin-left: 0px;
        height: calc(100vh - 100px);
        padding: 18px 12px 12px 12px;
        box-sizing: border-box;
        .admin-right-bottom-case{
            padding: 10px 12px;
            box-sizing: border-box;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            border-bottom: 1px solid #EBEBEB;
        }
        .admin-right-top{
            padding-bottom: 18px;
            box-sizing: border-box;
            font-size: 14px;
            color: #999999;
            border-bottom: 1px solid #EBEBEB;
            margin-bottom: 12px;
        }
        .admin-right-bottom{
            height: calc(100vh - 180px);
            display: flex;
            align-items: center;
            .admin-right-bottom-left{
                flex: 0 0 320px;
                height: calc(100vh - 180px);
                margin-right: 12px;
                border-radius: 4px;
                border: 1px solid #EBEBEB;
                .admin-right-bottom-left-title{
                    height: 40px;
                    background: #F7F7F7;
                    border-bottom: 1px solid #EBEBEB;
                    padding: 10px;
                    box-sizing: border-box;
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;
                }
                .admin-right-bottom-left-content{
                    height: calc(100vh - 220px);
                    overflow-y: auto;
                }
            }
            .admin-right-bottom-right{
                flex: 1;
                height: calc(100vh - 180px);
                border-radius: 4px;
                border: 1px solid #EBEBEB;
                .admin-right-bottom-left-title{
                    height: 40px;
                    background: #F7F7F7;
                    border-bottom: 1px solid #EBEBEB;
                    padding: 10px;
                    box-sizing: border-box;
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;
                }
                .admin-right-bottom-left-content{
                    height: calc(100vh - 220px);
                    overflow-y: auto;
                }
            }
        }
    }
  }
}
:deep(.el-checkbox){
    height: 20px;
}
:deep(.el-checkbox__label){
    color: #333333 !important;
}
.admin-left-case-top-search{
    :deep(.el-select__wrapper) {
        box-shadow: none !important;
        padding: 8px !important;
    }
    :deep(.el-input__wrapper){
        box-shadow: none !important;
    }
}
</style>